import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {
    Form, Input,  Button, Card, Radio,
} from 'antd';
import {routerRedux} from 'dva/router';
import {message} from "antd/lib/index";


const FormItem = Form.Item;
const RadioGroup = Radio.Group;

@connect(state => ({
    submitting: state.shopManage.submitting,
}))
@Form.create()
export default class ShopManageEdit extends PureComponent{
    state={
        modalVisible:false,
        record:{},
    }


    handleParentModalVisible = (e) => {
        this.props.handleModalVisible();
    }

    handleSubmit=()=>{
        const {dispatch}=this.props
        this.props.form.validateFields((err,values)=>{
            if(!err){
                dispatch({
                    type:'shopManage/updateShop',
                    payload:{...values,
                        id:this.props.record.id},
                    callback:(response)=>{
                        if(response.result===0){
                            this.props.handleModalVisible(false);
                            this.props.dispatch({
                                type:'shopManage/queryAll',
                            });
                            message.success("操作成功")
                        }else{
                            this.props.handleModalVisible(true);
                            message.error("操作失败")
                        }
                    }
                })
            }
        })
    }

    checkPhone=(rule,value,callback)=>{
        if (!/^1[34578]\d{9}$/.test(value)){
            callback("电话号码格式不正确");
        }
        callback()
    }

    render() {
        const {submitting,record} = this.props;
        const {getFieldDecorator, getFieldValue} = this.props.form;
        const id=this.props.record.id;

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        return (
            <Card bordered={false}>
                <Form
                    onSubmit={this.handleSubmit}
                    hideRequiredMark
                >
                    <FormItem {...formItemLayout} label="店铺名称">
                        {(getFieldDecorator("shop_name", {
                            initialValue: record.shop_name,
                            rules: [{
                                required: true, message: '店铺名称不能为空'
                            }],
                        }))(<Input placeholder="店铺名称"/>)}

                    </FormItem>
                    <FormItem {...formItemLayout} label="店铺标题">
                        {(getFieldDecorator("shop_title", {
                            initialValue: record.shop_title,
                            rules: [{
                                required: true, message: '店铺标题不能为空'
                            }],
                        }))(<Input placeholder="店铺标题"/>)}
                    </FormItem>
                    <FormItem {...formItemLayout} label="店铺地址">
                        {(getFieldDecorator("shop_address", {
                            initialValue: record.shop_address,
                            rules: [{
                                required: true, message: '店铺地址不能为空'
                            }],
                        }))(<Input placeholder="店铺地址"/>)}

                    </FormItem>
                    <FormItem {...formItemLayout} label="店铺邮箱">
                        {(getFieldDecorator("seller_email", {
                            initialValue: record.seller_email,
                            rules: [{
                                required: true, message: '店铺邮箱不能为空'
                            }],
                        }))(<Input placeholder="店铺邮箱"/>)}

                    </FormItem>
                    <FormItem {...formItemLayout} label="店铺电话">
                        {(getFieldDecorator("mobile", {
                            initialValue: record.mobile,
                            rules: [{
                                required: true,
                                whitespace:true,
                                message: '店铺电话不能为空',
                            },{
                                validator:this.checkPhone
                            }],
                        }))(<Input placeholder="店铺电话" type={'tel'}/>)}

                    </FormItem>
                    <FormItem {...formItemLayout} label="公告">
                        {(getFieldDecorator("notice", {
                            initialValue: record.notice,
                        }))(<Input placeholder="公告"/>)}

                    </FormItem>
                    <FormItem {...formItemLayout} label="状态">
                        {(getFieldDecorator("status", {
                            initialValue: record.status,
                        }))(<Radio.Group>
                            <Radio value={true}>开启</Radio>
                            <Radio value={false}>关闭</Radio>
                        </Radio.Group>)}
                    </FormItem>
                    <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                        <Button loading={submitting}
                                onClick={this.handleSubmit}>
                            提交
                        </Button>
                        <Button style={{marginLeft: 8}} onClick={this.handleParentModalVisible}>取消</Button>
                    </FormItem>
                </Form>
            </Card>
        );

    }
}